<template>
    <div class="loginFrame">
      <h2>注册</h2>
      <span v-if="check" style="color: red; font-size: 13px">{{
        verification
      }}</span>
      <div class="logintest">
        <input v-model="username" autofocus id="un" placeholder="用户名"/>
        <br />
        <input v-model="password" type="password" id="pwd" placeholder="密码"/>
      </div>
      <div id="login_control">
        <button id="btn_login" @click="registerCheck()" replace>注册</button>
      </div>
    </div>
</template>

<script>
import { setLocalStorage, getLocalStorage, removeLocalStorage } from "@/util/local-storage.js";
import axios from 'axios'

export default {
  name: "Register",
  inject: ["routerRefresh"],
  data() {
    return {
      verification: "",
      check: false,
      username: "",
      password: "",
    };
  },
  methods: {
    
    registerCheck(){
      if(!this.username.match(/^.{3,20}$/g)){
        this.verification = "用户名必须是3-20个字符";
        this.check = true;
        return;
      }
      if (!this.password.match(/^.{6,20}$/g)) {
        this.verification = "密码必须是6-20位";
        this.check = true;
        return;
      }
      let params={
        username:this.username,
        password:this.password
      }
      axios.post('http://localhost:8083/user/register',params)
      .then(res=>{
        console.log(res)
        if(res.data.errno!=0){
          this.$message({
          duration: 1000,
          message: res.data.errmsg,
          center: true,
          type: 'error'
          });
          return;
        }
        console.log("注册：",res)
        setLocalStorage({
          Authorization:res.data.data.token,
          id:res.data.data.user.id,
          username: res.data.data.user.username,
        });
         this.$message({
          duration: 1000,
          message: "注册成功,已自动登录",
          center: true,
          type: 'success'
        });
        this.username="";
        this.password="";
        this.routerRefresh();
      })
      
    },
   
  },

  created(){
    if(!!localStorage.getItem("Authorization")){
      this.$router.replace({name:'Myblog'})
    }
  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loginFrame {
  width: 400px;
  height: 260px;
  min-height: 260px;
  padding: 13px;

  position: absolute;
  left: 50%;
  top: 40%;

  transform: translate(-50%, -50%);

  background-color: rgba(240, 255, 255, 0.5);

  border-radius: 10px;
  text-align: center;

  user-select: none;
}
.logintest {
  padding: 5px;
}
#forget_pwd {
  color: rgb(153, 118, 88);
  text-decoration: none;
  margin-top: 10px;
  user-select: none;
}

#login_control {
  padding: 10px 0;
}

input {
  padding: 5px 10px;
  border-radius: 30px;
  margin: 4px;
  border: 1px sandybrown solid;
  outline: none;
}

#btn_login {
  color: rgb(170, 62, 36);
  padding: 5px 60px 5px 60px;
  border-radius: 4px;
  outline: none;
  border: 1px sandybrown solid;
  user-select: none;
}

#btn_login:hover {
  background-color: rgb(212, 155, 141);
}
</style>
